<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head><title>AllVideos Reloaded Documentation</title>
<style type="text/css">
    body {
        font-family:Arial,Helvetica,sans-serif;
        font-size:76%;
        line-height:1.3;
    }
    a {
        text-decoration:none;
        font-weight:bold;
    }
    a:hover {
        text-decoration:underline;
    }
    a:active,a:focus {
        outline:none;
    }
    a,h2,a:hover,li#current a,li.parent li#current a,li#current li a:hover {
       color:#53a31c;
    }
    .small,.createdate,.modifydate {
        font:0.9em Arial,Helvetica,sans-serif;
        color:#53a31c;
    }
    table.avrtable {
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
    }
    table.avrtable td,
    table.avrtable th {
        border-right: 1px solid #000;
        border-top: 1px solid #000;
    }
    
    span.alert {
        background:#FFD6D6 url(notice-alert.png) no-repeat scroll 10px 50%;
        border-bottom:3px solid #FE7B7A;
        border-top:3px solid #FE7B7A;
        color:#CC0000;
    }
    span.info {
        background:#C0D2E8 url(notice-info.png) no-repeat scroll 10px 50%;
        border-bottom:3px solid #629DE3;
        border-top:3px solid #629DE3;
        color:#0055BB;
    }
    span.note {
        background:#F0E6BE url(notice-note.png) no-repeat scroll 10px 50%;
        border-bottom:3px solid #FDE179;
        border-top:3px solid #FDE179;
        color:#B79000;
    }
    span.download {
        background:#DEE6C5 url(notice-download.png) no-repeat scroll 10px 50%;
        border-bottom:3px solid #C2DF88;
        border-top:3px solid #C2DF88;
        color:#57861A;
    }
    span.alert, span.info, span.download, span.note {
        display:block;
        margin:15px 0pt;
        padding:10px 10px 10px 45px;
    }
    .contenttoc {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
    }
</style>
</head><body>
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
	<table cellpadding="0" cellspacing="0" class="contenttoc">
	<tr>
		<th>Article Index</th>
	</tr>
	<tr>
		<td>
		<a href="en-gb.doc0.html">Introduction</a>
		</td>
	</tr>
			<tr>
				<td>
				<a href="en-gb.doc1.html">Licence</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc2.html">Streaming local content</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc3.html">Streaming remote content</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc4.html">Plugin Parameters</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc5.html">Using playlists</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc6.html">Managing playlists</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc7.html">Using the AVR Media button</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc8.html">Popup window and lightbox</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc9.html">The system plugin</a>
				</td>
			</tr>
			<tr>
				<td>
				<a href="en-gb.doc10.html">Managing Players, Rippers and Tags</a>
				</td>
			</tr>
			</table><div class="pagenavcounter">Page 6 of 11</div>
<h2>Using playlists</h2>
<p>When streaming local content with JW Media player, instead of using a single media file, you can provide a playlist XML file. Of course, if you want to provide a playlist file, you must either use the <strong>auto</strong> tag or one of the <strong>remote</strong> variants, since only those do not append any predefined extensions automatically. Instead of providing the media url directly, you then would specify the playlist URL instead. The player supports three commonly used playlist formats to ensure maximum compatibility: <a href="http://en.wikipedia.org/wiki/XSPF">XSPF</a> (much used for CC music), <a href="http://en.wikipedia.org/wiki/RSS">RSS</a> (much-used for Podcasts) and <a href="http://en.wikipedia.org/wiki/ATOM">ATOM</a> (much-used by Blogs). On Jeroen's website, he has placed additional examples of both <a href="http://www.jeroenwijering.com/upload/xspf_example.xml">an xspf playlist</a> and <a href="http://www.jeroenwijering.com/upload/rss_example.xml">an rss playlist</a>, with nearly all supported tags included.</p>
<p>With playlists, you can achieve some effects, that are not available when using plain media URLs. For example, you can attach a preview image to a video. This image is shown, whenever the player is stopped. Here is a simple example. This example is used at this website for displaying a preview image in the small video on the frontpage:</p>
<pre class="xml">&nbsp;
  <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;playlist</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1&quot;</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;http://xspf.orig/ns/0/&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
    <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;title<span style="font-weight: bold; color: black;">&gt;</span></span></span>CG Playlist<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/title<span style="font-weight: bold; color: black;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;trackList<span style="font-weight: bold; color: black;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;track<span style="font-weight: bold; color: black;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;title<span style="font-weight: bold; color: black;">&gt;</span></span></span>Reloaded<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/title<span style="font-weight: bold; color: black;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;location<span style="font-weight: bold; color: black;">&gt;</span></span></span>/images/stories/videos/matrix.flv<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/location<span style="font-weight: bold; color: black;">&gt;</span></span></span>
        <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;image<span style="font-weight: bold; color: black;">&gt;</span></span></span>/images/stories/videos/matrix_thumb_small.jpg<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/image<span style="font-weight: bold; color: black;">&gt;</span></span></span>
      <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/track<span style="font-weight: bold; color: black;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/trackList<span style="font-weight: bold; color: black;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/playlist<span style="font-weight: bold; color: black;">&gt;</span></span></span>
&nbsp;</pre>
<p><span class="info">Please note also, that if you use the <strong>auto</strong> tag (without an absolute URL), then the playlist file itself must be located in the images/stories/<strong>videos</strong> subdir, even if the list references only audio files.</span> Furthermore, if you use a .<strong>m4v</strong> file extension in the location tag, then you <strong>must</strong> specify the media type manually for the relevant track by adding the following element at the <strong>end</strong> of the track definition: <samp>&lt;meta rel=&quot;type&quot;&gt;flv&lt;/meta&gt;</samp></p>
<h2>Playlist Display</h2>
<p>Displaying a playlist properly can sometimes be a hassle if yo don't know how the player takes the various parameters into account. Here, I try to explain the logic: For both, the player's width and height, there exists a second parameter called <strong>displaywidth</strong> and <strong>displayheight</strong>. Normally, those are left undefined which results in the players standard display. If one of these is set to a smaller value however, the playlist will be shown. If you set displaywidth, then the playlist will be shown to the right of the videofame <strong>above</strong> the controlbar. The width of the playlist is simply <samp>width - displaywidth</samp> in that case. Using displayheight is a little bit more complicated, as the controlbar height has to be accounted for. The height of the controlbar is 20px, so if you set displayheight to a value smaller than <samp>height - 20</samp>, then the playlist fills up that difference <strong>below</strong> the controlbar. So in this case, the height of the playlist is <samp>height - displayheight - 20</samp>. There is also a special case where no playlist is shown but another effect is achieved: Setting the displayheight <strong>equally</strong> to height, makes the controlbar to be shown slightly smaller inside the video and showing/dissapearing when the mouse hovers the video.</p>
<h2>Parameters</h2>
<p>Some of the player's parameters are related to playlists: If you want to show the images attached to the playlist entries in the list view as thumbnails, you can set the parameter <strong>plthumbs</strong> to true.</p>
<br /><div class="pagenavbar"><div><a href="en-gb.doc4.html">&lt;&lt; Prev</a> - <a href="en-gb.doc6.html">Next &gt;&gt;</a></div></div><br /></td>
</tr>
<tr>
	<td colspan="2"  class="modifydate">
		Last Updated ( Monday, 07 July 2008 22:29 )
	</td>
</tr>
</table></body>
</html>